<template>
    <p>列表及分页</p>
   
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="account" label="account" width="180" />
    <el-table-column prop="createTime" label="createTime" width="180" />
    <el-table-column prop="level" label="level" />
  </el-table>

  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5,10]"
      layout="total,sizes, prev, pager, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  

</template>

<script setup>
import {ref} from 'vue'
const data=Array.from(Array(144),(v,i) =>{
  return {
        account: 'uaa'+ (i+1),
        createTime: new Date(Date.now() + Math.ceil(Math.random()*1000)),
        level: Math.ceil(Math.random()*10)
    }
})

console.log('data',data);

// 总数据
const tableData = ref([])
// 当前页
const currentPage=ref(1)
// 每一页展示的数量
const pageSize=ref(5)
// 总数
const total=ref(0)

const getData=(page,pageSize)=>{
  tableData.value=data.slice((page - 1) * pageSize, page * pageSize)
  total.value=data.length
}

getData(1,pageSize.value)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  getData(currentPage.value,val)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  // getData(page.value,val)
  getData(val,pageSize.value)
}

</script>